<style type="text/css">
h4.pane.sub-title {
    padding-bottom: 3px;
    border-bottom: 1px dashed #e5e5e5;
}
</style>
<div ng-controller="panelController">
    <h4 class="pane sub-title">展示</h4>
    <h5 ng-show="!hidden1">Panel 1</h5>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
				标题
			</h4>
        </div>
        <div class="panel-collapse collapse in">
            <div class="panel-body">内容</div>
        </div>
    </div>
    <hr>
    <h5 ng-show="!hidden1">Panel 2</h5>
    <div class="panel panel-default" ng-class="{hidden: hidden1}">
        <div class="panel-heading">
            <h4 class="panel-title">
            	<span class="glyphicon glyphicon-th-list"></span>
				
				<span class="pull-right">
					<span class="glyphicon" ng-class="collapsed1?'glyphicon-chevron-down':'glyphicon-chevron-up'" ng-click="collapsed1 = !collapsed1"></span>&nbsp;<span class="glyphicon glyphicon-remove" ng-click="hidden1 = true"></span>
				</span>
			</h4>
        </div>
        <div class="panel-collapse collapse" ng-class="{in: collapsed1}">
            <div class="panel-body">可折叠内容</div>
        </div>
    </div>
    <span class="btn btn-primary" ng-show="hidden1" ng-click="hidden1 = false">显示Panel2</span>
    <hr>
    <h5 ng-show="!hidden2">Panel 3</h5>
    <div class="panel panel-default" ng-class="{hidden: hidden2}">
        <div class="panel-heading" ng-mouseover="over = true" ng-mouseout="over = false">
            <h4 class="panel-title">
            	<span class="glyphicon" ng-class="collapsed2?'glyphicon-chevron-down':'glyphicon-chevron-up'" ng-click="collapsed2 = !collapsed2"></span>
				
				<span class="pull-right">
					<span ng-show="over" class="glyphicon glyphicon-remove" ng-click="hidden2 = true"></span>
				</span>
			</h4>
        </div>
        <div class="panel-collapse collapse" ng-class="{in: collapsed2}">
            <div class="panel-body">可折叠内容</div>
        </div>
    </div>
    <span class="btn btn-primary" ng-show="hidden2" ng-click="hidden2 = false">显示Panel3</span>
    <hr>
    <h5 ng-show="!hidden3">Panel 4</h5>
    <link rel="stylesheet" href="panel/css/panel.css" />
    <div class="pane panel panel-default" ng-class="{hidden: hidden3}">
        <div class="panel-heading">
            <h4 class="panel-title">
            	<span class="glyphicon" ng-class="collapsed3?'glyphicon-chevron-down':'glyphicon-chevron-up'" ng-click="collapsed3 = !collapsed3"></span>
				
				<span class="pull-right">
					<span class="remove glyphicon glyphicon-remove" ng-click="hidden3 = true"></span>
				</span>
			</h4>
        </div>
        <div class="panel-collapse collapse" ng-class="{in: collapsed3}">
            <div class="panel-body">可折叠内容</div>
        </div>
    </div>
    <span class="btn btn-primary" ng-show="hidden3" ng-click="hidden3 = false">显示Panel4</span>
    
</div>
